<template>
  <div style="margin-left: 0.5vw;margin-top: 0.125rem; width: 89.5vw;height: 92.5vh; background-color: rgb(245, 245, 245);display: flex;flex-direction: row;justify-content: space-around;">
    <!-- 左边一栏 -->
    <div style=" width: 48%;height: 100%;display: flex;flex-direction: column;justify-content: space-around;">
      <!-- 标题栏 -->
      <div style="font-size: 24px;color: rgb(64, 158, 255);margin-left: 15px;">票房走势及预测</div>
      <!-- 条形图 -->
      <div id="zhexian" style="width: 100%;height: 60%;"></div>
      <!-- 词云图 -->
      <div style="display: flex;flex-direction: row; width: 100%;height: 30%;">
        <!-- 词云标志 -->
        <div style="width: 30%;height: 100%;">
          <img style="width: 100%;height: 100%;" src="../pic/homePage/5a8fda37a29ec980c7448dc32d7b2ed.png" />
        </div>
        <!-- 词云图 -->
        <div id="cloud" :data="cloudMsg" style="width: 100%;height: 100%;"></div>

      </div>

    </div>
    <!-- 右边一栏 -->
    <div style="width: 48%;height: 100%;display: flex;flex-direction: column;justify-content: space-between;">
      <!-- 标题栏 -->
      <div style="font-size: 24px;color: rgb(64, 158, 255);margin-left: 15px;">自定义票房预测</div>
      <!-- 操作栏 -->
      <div style="width: 100%;height: 35%;display: flex;flex-direction: column;justify-content: space-around;">
        <div style="width: 100%;height: 25%;display: flex;flex-direction: row;justify-content: space-around;">
          <!-- 国家 -->
          <div style="width: 25%;height: 100%;display: flex;flex-direction: row;align-items: center;">
            <div style="font-size: 18px;">国家 </div>
            <el-select style="width: 130px;margin-left: 5px;" v-model="nationValue" placeholder="请选择">
              <el-option v-for="item in nationoptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <!-- 上映时间 -->
          <div style="width: 35%;height: 100%;display: flex;flex-direction: row;align-items: center;">
            <div style="font-size: 18px;">上映时间 </div>
            <el-date-picker style="width: 160px;margin-left: 5px;" v-model="showtimevalue" type="date" placeholder="选择日期">
            </el-date-picker>
          </div>
          <!-- 时长 -->
          <div style="width: 25%;height: 100%;display: flex;flex-direction: row;align-items: center;">
            <div style="font-size: 18px;">时长</div>
            <el-input style="width: 130px;margin-left: 5px;" v-model="timeLongvalue" placeholder="时长"></el-input>
          </div>
        </div>

        <div style="width: 100%;height: 25%;display: flex;flex-direction: row;align-items: center;">
          <div style="margin-left: 19px; font-size: 18px;margin-right: 10px;">种类 </div>
          <div>
            <el-checkbox-group v-model="rangeList">
              <el-checkbox label="动作"></el-checkbox>
              <el-checkbox label="爱情"></el-checkbox>
              <el-checkbox label="剧情"></el-checkbox>
              <el-checkbox label="动画"></el-checkbox>
              <el-checkbox label="古装"></el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div style="width: 100%;height: 40%;display: flex;flex-direction: row;align-items: center;">
          <!-- 导演 -->
          <div style="margin-left: 19px;width: 40%;height: 80%;display: flex;flex-direction: column;">
            <div style="width: 100%;height: 20%; display: flex;flex-direction: row;margin-bottom: 15px;">
              <div v-for="(src, index) in directorList " :key="index" style="font-size: 18px; color:rgb(64, 158, 255) ;margin-right: 15px;">{{directorList[index]}}</div>
            </div>
            <div style="display: flex;flex-direction: row;align-items: center;">
              <div style="font-size: 18px;margin-right: 15px;">导演 </div>
              <div>
                <el-autocomplete style="width: 130px" class="inline-input" v-model="directorName" :fetch-suggestions="directorSearch"
                  placeholder="搜索导演" @select="directorSelect"></el-autocomplete>
              </div>

            </div>
          </div>

          <!-- 演员 -->
          <div style="width: 40%;height: 80%;display: flex;flex-direction: column;">
            <div style="width: 100%;height: 20%; display: flex;flex-direction: row;margin-bottom: 15px;">
              <div v-for="(src, index) in actorList " :key="index" style="font-size: 18px; color:rgb(64, 158, 255) ; margin-right: 15px; ">{{actorList[index]}}</div>
            </div>
            <div style="display: flex;flex-direction: row;align-items: center;">
              <div style="font-size: 18px;margin-right: 15px;display: flex;flex-direction: row;">演员 </div>
              <div>
                <el-autocomplete style="width: 130px" class="inline-input" v-model="actorName" :fetch-suggestions="actorSearch"
                  placeholder="搜索演员" @select="actorSelect"></el-autocomplete>
              </div>

            </div>
          </div>

          <!-- 按钮 -->
          <div style="width: 20%;display: flex;flex-direction: row;justify-content: center;">
            <el-button @click="forecastBtn" type="success">预测</el-button>
          </div>
        </div>


      </div>
      <!-- 折线图 -->
      <div id="forecastZXT" style="width: 100%;height: 55%;"></div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  import * as echarts from "echarts";
  import $ from 'jquery'; //在需要使用的页面中
  import "echarts-wordcloud/dist/echarts-wordcloud";
  import "echarts-wordcloud/dist/echarts-wordcloud.min";
  export default {
    data() {
      return {
        url:'http://106.13.117.37:8000',
        //导演
        directorList: [],
        directorName: '',
        directorrestaurants: '',
        directorresults: [],
        //演员
        actorList: [],
        actorName: '',
        actorrestaurants: '',
        actorresults: [],

        //选择种类
        rangeList: [],
        //电影时长
        timeLongvalue: '',
        //上映时间
        showtimevalue: '',
        //选择国家栏
        nationValue: '',
        nationoptions: [{
          value: '中国大陆',
          label: '中国大陆'
        }, {
          value: '美国',
          label: '美国'
        }, {
          value: '英国',
          label: '英国'
        }, {
          value: '泰国',
          label: '泰国'
        }, {
          value: '法国',
          label: '法国'
        }],
        cloudMsg: [
        ],
        forecastSrc: {
          data: ['2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06', '2020-07', '', '', ],
          zhanbiData: [{
              value: 1048,
              name: '爱情'
            },
            {
              value: 735,
              name: '剧情'
            },
            {
              value: 580,
              name: '动作'
            },

          ],
        },

        zdyForecastSrc:{
          time:[],
          data:[]
        }

      }
    },
    mounted() {
      //this.drawZhexian(this.$data.forecastSrc.data, this.$data.forecastSrc.zhanbiData)
      this.cloud(this.$data.cloudMsg)
      this.drawforecastZXT()
      this.getCloudMsg()
    },
    methods: {
      //预测
      forecastBtn(){
        console.log("这是导演："+this.$data.directorList +"这是演员："+this.$data.actorList + "这是时间"+ this.$data.showtimevalue+"这是时长"+this.$data.timeLongvalue+"这是国家"+this.$data.nationValue+"这是种类"+this.$data.rangeList )
        let vue = this;
        axios.post(vue.$data.url+'/api/v1/movie/selfDesign',{
        			country: vue.$data.nationValue,
              //date:vue.$data.showtimevalue.date,
              //var datetime=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
              date:vue.$data.showtimevalue.getFullYear()+(vue.$data.showtimevalue.getMonth() + 1) +vue.$data.showtimevalue.getDate(),
              length:parseInt(vue.$data.timeLongvalue),
              director:vue.$data.directorList[0],
              star1:vue.$data.actorList[0],
              star2:vue.$data.actorList[1],
              kind:vue.$data.rangeList[0],
        	})
        	.then(response => {
        		if (response.data.msg == 'success') {
              console.log(response)
              for(let i = 0;i < response.data.res.length;i++){
                if((vue.$data.showtimevalue.getDate()+i)<=30){
                  vue.$data.zdyForecastSrc.time.push((vue.$data.showtimevalue.getMonth() + 1)+'-'+(vue.$data.showtimevalue.getDate()+i))
                }else{
                  vue.$data.zdyForecastSrc.time.push((vue.$data.showtimevalue.getMonth() + 2)+'-'+(vue.$data.showtimevalue.getDate()+i-30))
                }
                vue.$data.zdyForecastSrc.data.push(response.data.res[i])
              }
              vue.drawZhexian(vue.$data.zdyForecastSrc.time, vue.$data.zdyForecastSrc.data)
        		} else {
        			console.error("获取机器列表失败")
        		}
        	})
      },
      //导演实时搜索
      directorSearch(queryString, cb) {
        var directorrestaurants = this.directorrestaurants;
        console.log(queryString+"搜索的内容")
        //获取数据
        let vue = this;
        axios.get(vue.$data.url+'/api/v1/movie/director?key='+queryString)
        	.then(response => {
        		if (response.data.msg == 'success') {
        			console.log("搜索的导演")
        			console.log(response)
              vue.$data.directorresults = response.data.res
              console.log(vue.$data.directorresults)
              cb(this.$data.directorresults)
        		} else {
        			console.error("获取机器列表失败")
        		}
        	})
      },
      //搜索
      directorSelect(item) {
        console.log(item);
        console.log("进行导演搜索")
        this.$data.directorList.push(item.value)
        console.log(this.$data.directorList)
      },
      //演员实时搜索
      actorSearch(queryString, cb) {///api/v1/movie/actor?key=
        var actorrestaurants = this.actorrestaurants;
        console.log(queryString+"搜索的内容")
        //获取数据
        let vue = this;
        axios.get(vue.$data.url+'/api/v1/movie/actor?key='+queryString)
        	.then(response => {
        		if (response.data.msg == 'success') {
        			console.log("搜索的演员")
        			console.log(response)
              vue.$data.actorresults = response.data.res
              console.log(vue.$data.actorresults)
              cb(this.$data.actorresults)
        		} else {
        			console.error("获取机器列表失败")
        		}
        	})
      },
      //搜索
      actorSelect(item) {
        console.log(item);
        console.log("进行演员搜索")
        this.$data.actorList.push(item.value)
        console.log(this.$data.actorList)
      },

      //词云数据的获取
      getCloudMsg() {
      	let vue = this;
      	axios.get('http://47.93.220.108:8000/api/v1/movie/emotion')
      		.then(response => {
      			if (response.data.msg == 'success') {
      				console.log("获取词云图数据")
      				console.log(response)
      				for (let i = 0; i < Object.keys(response.data.res).length; i++) {
      					vue.$data.cloudMsg.push({
      						value: Object.values(response.data.res)[i],
      						name: Object.keys(response.data.res)[i]
      					});
      				}
      			} else {
      				console.error("获取机器列表失败")
      			}
      		})
      	console.log('这是词云中的数据')
      	console.log(vue.$data.cloudMsg)
      	var that = this;
      	setTimeout(function () {
      	   that.cloud(that.$data.cloudMsg)

      	},1000);

      	//this.cloud()
      },

      cloud(cloudmsg) {
        console.log("开始渲染词云图")
        console.log(cloudmsg)
        var mychart = echarts.init(document.getElementById("cloud"));
        console.log('lll');
        var option = {
          //backgroundColor: ,
          series: [{
            type: "wordCloud",
            //用来调整词之间的距离
            gridSize: 20,
            //用来调整字的大小范围
            // Text size range which the value in data will be mapped to.
            // Default to have minimum 12px and maximum 60px size.
            sizeRange: [12, 90],
            // Text rotation range and step in degree. Text will be rotated randomly in range [-90,                                                                             90] by rotationStep 45
            //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
            rotationRange: [-45, 0, 45, 90],
            rotationRange: [0, 90],
            rotationRange: [0, 0],
            //随机生成字体颜色
            // maskImage: maskImage,
            textStyle: {
              normal: {
                color: function() {
                  return (
                    "rgb(" +
                    Math.round(Math.random() * 255) +
                    ", " +
                    Math.round(Math.random() * 255) +
                    ", " +
                    Math.round(Math.random() * 255) +
                    ")"
                  );
                }
              }
            },
            //位置相关设置
            // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
            // Default to be put in the center and has 75% x 80% size.
            left: "center",
            top: "center",
            right: null,
            bottom: null,
            width: "100%",
            height: "100%",
            //数据
            data: cloudmsg
          }]
        };
        mychart.setOption(option);


      },
      //预测的折线图
      drawZhexian(timeData, Data) {
        echarts.init(document.getElementById("forecastZXT")).setOption({
           xAxis: {
                  type: 'category',
                  data: timeData
              },
              yAxis: {
                  type: 'value'
              },
              series: [{
                  data: Data,
                  type: 'line',
                  smooth: true
              }]
        })
},

      drawforecastZXT() {
        echarts.init(document.getElementById("zhexian")).setOption({

          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          legend: {
                  data: ['爱情', '战争', '冒险', '传记', '剧情','奇幻','悬疑','科幻','爱情预测', '战争预测', '冒险预测', '传记预测', '剧情预测','奇幻预测','悬疑预测','科幻预测']
              },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
              name: '类型票房占比',
              type: 'pie',
              center: ['85%', 60],
              radius: 35,
              data: [],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            },
            {
              name: '剧情',
              type: 'line',

              data: [2300, 1220, 2510, 2340,2367 ,2166,  ]
            },
            {
              name: '剧情预测',
              type: 'line',
lineStyle: {
                          color: '#90fffc',
                          width: 4,
                          type: 'dashed'
                      },
              data: [, , , , ,2166 ,2378 ,2600,2490 ]
            },
            {
              name: '爱情',
              type: 'line',

              data: [1400, 1620, 1710, 1340,1567 ,1366,  ]
            },
            {
              name: '爱情预测',
              type: 'line',
lineStyle: {
                          color: '#005500',
                          width: 4,
                          type: 'dashed'
                      },
              data: [, , , , ,1366 ,1378 ,1800,1890 ]
            },
            {
              name: '战争',
              type: 'line',
              stack: '总量',
              data: [1300, 1820, 1610, 1740,1467 ,1366,  ]
            },
            {
              name: '战争预测',
              type: 'line',
lineStyle: {
                          color: '#a11ac6',
                          width: 4,
                          type: 'dashed'
                      },
              data: [, , , , ,1366 ,1578 ,1600,1890 ]
            },
            {
              name: '冒险',
              type: 'line',

              data: [1500, 1620, 1780, 1650,1227 ,1686  ]
            },
            {
              name: '冒险预测',
              type: 'line',
              lineStyle: {
                          color: '#5470C6',
                          width: 4,
                          type: 'dashed'
                      },
              data: [, , , , ,1686 ,1898 ,1700,1690 ]
            },
            {
              name: '传记',
              type: 'line',

              data: [1000, 920, 890, 950,1027 ,1286,  ]
            },
            {
              name: '传记预测',
              type: 'line',
lineStyle: {
                          color: '#c63b5b',
                          width: 4,
                          type: 'dashed'
                      },
              data: [, , , , ,1286 ,1228 ,1000,1100 ]
            },
            {
              name: '奇幻',
              type: 'line',

              data: [1500, 1920, 1890, 1450,1727 ,1986,  ]
            },
            {
              name: '奇幻预测',
              type: 'line',
lineStyle: {
                          color: '#c6c001',
                          width: 4,
                          type: 'dashed'
                      },
              data: [, , , , ,1986 ,1878 ,1900,1560 ]
            },
            {
              name: '悬疑',
              type: 'line',

              data: [1200, 1120, 1340, 1450,1327 ,1386,  ]
            },
            {
              name: '悬疑预测',
              type: 'line',
lineStyle: {
                          color: '#1509c6',
                          width: 4,
                          type: 'dashed'
                      },
              data: [, , , , ,1386 ,1478 ,1500,1360 ]
            },

           {
             name: '科幻',
             type: 'line',

             data: [1300, 2120, 1340, 1850,1927 ,2386,  ]
           },
           {
             name: '科幻预测',
             type: 'line',
lineStyle: {
                          color: '#49ffd8',
                          width: 4,
                          type: 'dashed'
                      },
             data: [, , , , ,2386 ,1878 ,1900,1860 ]
           },



          ]
        })
      },

    },
  }
</script>

<style>
</style>
